<template>
  <div>
    <el-button type="primary" @click="add">
      <el-icon :size="14">
        <plus />
      </el-icon>
      添加
    </el-button>
  </div>
  <el-divider />
  <div>
    <el-table :data="departs" style="width: 100%;">
      <el-table-column fixed prop="id" label="编号" width="150" />
      <el-table-column prop="name" label="名称" width="250" />
      <el-table-column prop="remark" label="说明" />
      <el-table-column prop="created" label="创建时间" width="180" />
      <el-table-column prop="updated" label="更新时间" width="180" />
      <el-table-column prop="statu" label="状态" width="120" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="doDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination v-model:currentPage="current" layout="prev, pager, next" :total="total" :hide-on-single-page="true"></el-pagination>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="部门信息" width="30%" :before-close="handleClose" @opened="resetForm">
    <div>
      <el-form ref="deptForm" :model="deptForm" :rules="rules" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="deptForm.name" placeholder="请填写部门名称"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="remark">
          <el-input v-model="deptForm.remark" type="textarea" placeholder="请填写说明信息"></el-input>
        </el-form-item>
        <el-form-item label="绩效分配" prop="basBonus">
          <el-switch v-model="deptForm.hasBonus" active-text="参与" inactive-text="不参与"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doSave">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {list, save, del} from '../../api/depart.js';
import {ElMessage, ElMessageBox, ElPagination} from "element-plus";

export default {
  name: "Depart",
  setup() {
    const newDept = {
      name: '',
      remark: '',
      hasBonus: false
    }
    const rules= {
      name: [{ required: true, message: '名称不能为空', trigger: 'blur', }],
      remark: [{ required: true, message: '说明不能为空', trigger: 'blur', }]
    }

    return {
      newDept,
      rules
    }
  },
  data() {
    return {
      departments: [],
      dialogVisible: false,
      deptForm: this.newDept,
      current: 1,
      size: 10
    }
  },
  created() {
    this.getDeparts()
  },
  methods: {
    getDeparts() {
      list().then(res => {
        this.departments = res.data
      })
    },
    add() {
      this.deptForm = JSON.parse(JSON.stringify(this.newDept))
      this.dialogVisible = true
    },
    edit(row) {
      this.deptForm = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    doSave() {
      this.$refs["deptForm"].validate((valid) => {
        if(valid) {
          ElMessageBox.confirm('你正在保存部门信息，确认保存?', '警告',
              { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', })
              .then(() => {
                // 保存部门信息
                save(this.deptForm).then(res => {
                  let _type = res.code === 200 ? 'success' : 'error'
                  ElMessage({
                    type: _type,
                    message: res.msg,
                  })
                  this.dialogVisible = false
                  this.getDeparts()
                })
              })
              .catch(() => {
                ElMessage({
                  type: 'info',
                  message: '你取消了保存',
                })
              })
        }
      })
    },
    doDel(id) {
      ElMessageBox.confirm('你正在删除部门信息，确认保存?', '警告',
          { confirmButtonText: '确定', cancelButtonText: '取消', type: 'error', })
          .then(() => {
            // 删除部门信息
            del(id).then(res => {
              let _type = res.code === 200 ? 'success' : 'error'
              ElMessage({
                type: _type,
                message: res.msg,
              })
              this.getDeparts()
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '你取消了删除!',
            })
          })
    },
    handleClose(done) {
      this.dialogVisible = false
      done()
    },
    resetForm() {
      this.$refs["deptForm"].clearValidate()
    }
  },
  computed: {
    departs() {
      let data = []
      let _start = (this.current - 1) * this.size
      let _end = _start + this.size
      return this.departments.slice(_start, _end);
    },
    total() {
      return this.departments.length
    }
  }
}
</script>

<style scoped>

</style>